<template>

	<div>
<div id="bindBankInfor">

    <div class="BankNumber_infor">
        <ul>
            <li><p>持卡人</p><p> <input type="text" placeholder="请输入真实姓名" id="true_name" v-model="true_name"></p></li>
            <li style="border-bottom: 0"><p>身份证号</p> <p><input type="text" placeholder="仅支持中国大陆身份证号" id="id_number" v-model="id_number"></p></li>
        </ul>
    </div>
    <div class="BankNumber_infor">
        <ul>
            <li><p>银行卡号</p><p> <input type="text" placeholder="请输入储蓄卡卡号" id="card_no" v-model="card_no"></p></li>
        </ul>
    </div>
    <div class="BankNumber_infor">
        <ul>
            <li style="border-bottom: 0"><p>预留手机</p> <p><input type="text" placeholder="请输入银行预留手机号" id="mobile" v-model="mobile"></p></li>

        </ul>

    </div>

    <div class="personInfor_Btn">
        <button @click="bankSuccess()">确定</button>
    </div>


    <div class="tibind" v-show="tibind">
        <p>{{bindMessage}}</p>
    </div>
</div>
	</div>
</template>

<script>
  import axios from 'axios'
  export default {
     name:'eight',
     data() {
        return {
          AuthTokenBank:'',
          true_name:'',
          id_number:'',
          card_no:'',
          mobile:'',
          tibind:false,
          bindMessage:'',
          times:2000

        }
       },
    created(){
      var that = this;
      that.AuthTokenBank = sessionStorage.getItem('AuthToken');
      console.log(that.AuthTokenBank)
    },
     methods: {
       bankSuccess() {
         var that=this
         if(that.true_name==''||that.id_number==''||that.card_no==''||that.mobile==''){
           that.tibind=true;
           that.bindMessage='请填写完整信息！';
           window.setTimeout(function () {
             that.tibind = false;
           }, that.times);
         }else {
           axios.post('http://test.zjapi.xianxiangle.com/user/bind_bank',
             {AuthToken:this.AuthTokenBank,
               true_name:this.true_name,
               id_number:this.id_number,
               card_no:this.card_no,
               mobile:this.mobile,
             }
           ).then(function (res) {
             console.log(res.data);
             console.log(res.data.message);
             that.tibind=true;
             that.bindMessage=res.data.message;
             window.setTimeout(function () {
               that.tibind = false;
               that.$router.push({path:'/first'});
             }, that.times);

           }).catch(function (err) {

           })
         }

       }
     },
//   components: {
//     AppHeader
//   }
	}
</script>

<style lang="scss" scoped>
  *{
    text-align: left;
  }
#bindBankInfor {
  width: 100%;
  margin: auto;
  header {
    width: 100%;
    background: white;
    padding: 0.6rem 0 0.6rem 0;
    border-bottom: 1px solid #e3e3e3;
    display: flex;
    justify-content: space-between;
    img {
      width: 1.4rem;
      height: 2rem;
      padding: 0.6rem;
    }
    p {
      font-size: 1.6rem;
      padding: 0.5rem;
      color: #333333;
      text-align: center;
    }
  }

  .BankNumber_infor {
    width: 100%;
    margin: auto;
    background: white;
    //margin-top: 1rem;
    ul {
      width: 100%;
      margin: auto;
      li {
        width: 90%;
        height: 3rem;
        line-height: 3rem;
        padding: 1rem 0 1rem 0rem;
        display: flex;
        justify-content: start;
        margin: auto;
        border-bottom: 1px solid #ccc;
        font-family:PingFangSC-Medium;
        //font-weight: 700;
        //border: 1px solid;
        p {
          //font-size: 2rem;
          font-size: 1.6rem;
          //font-family: 'PingFangSC-Medium';
        }
        p:nth-child(1) {
          width: 20%;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
        }
        p:nth-child(2) {
          width: 50%;
          height: 3rem;
          line-height: 3rem;
          input {
            width: 100%;
            padding-left: 5%;
            height: 3rem;
            line-height: 3rem;
            outline: none;
            border: 0;
            position: relative;
            right: 3rem;
          }
        }
      }
    }
  }
  .personInfor_Btn {
    width: 100%;
    margin-top: 4rem;
    text-align: center;
    button {
      width: 90%;
      height: 3.2rem;
      line-height: 3.2rem;
      background: #32D69C;
      text-align: center;
      color: white;
      border: 0;
      outline: none;
      border-radius: 2rem;
      font-size: 1.4rem;
    }
  }
}

.tibind{
    width: 100%;
    /*display: none;*/
    margin: auto;
  margin-top: 1rem;
    p{
      width: 80%;
      background:rgba(0,0,0,0.4);
      border-radius: 0.3rem;
      color: white;
      padding: 0.5rem;
      text-align: center;
      height: 2rem;
      line-height: 2rem;
      font-size: 1.6rem;
      margin: auto;
  }
}
</style>
